<template>
  <div class="number-wrap flex">
    <el-input-number
      v-model="minVal"
      :min="min"
      :max="max"
      :controls="false"
      :precision="precision"
      @blur="handleCheckMin"
      :placeholder="placeholder"
    />
    <span class="flex items-center">{{ separate }}</span>
    <el-input-number
      v-model="maxVal"
      :min="min"
      :max="max"
      :controls="false"
      :precision="precision"
      @blur="handleCheckMax"
      :placeholder="placeholder"
    />
    <div class="suffix" v-if="suffix">{{ suffix }}</div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from "vue";

const props = defineProps({
  modelValue: { type: Array, default: () => [] }, // 改为数组
  precision: { type: Number, default: 0 },
  suffix: { type: String, default: "" },
  min: { type: Number, default: 0 },
  max: { type: Number, default: 999999999 },
  placeholder: { type: String, default: "" },
  separate: { type: String, default: "→" },
  checkValue: { type: Boolean, default: false },
});

const emit = defineEmits(["update:modelValue"]);

const minVal = ref();
const maxVal = ref();

const handleCheckMin = () => {
  if (!props.checkValue) return;
  if (minVal.value > maxVal.value) {
    maxVal.value = minVal.value;
  }
};

const handleCheckMax = () => {
  if (!props.checkValue) return;
  if (maxVal.value < minVal.value) {
    minVal.value = maxVal.value;
  }
};

// 监听输入框变化并更新 modelValue（作为数组返回）
watch([minVal, maxVal], () => {
  emit("update:modelValue", [minVal.value, maxVal.value]);
});

// 监听 modelValue 变化，并同步到 minVal 和 maxVal
watch(
  () => props.modelValue,
  (val) => {
    minVal.value = val?.[0];
    maxVal.value = val?.[1];
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.number-wrap {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
  }
  .suffix {
    font-size: 14px;
    color: #3a4259;
    line-height: 20px;
    padding: 0 14px;
    min-width: 40px;
    background: #fafafa;
    border-left: 1px solid #e6e7e9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>